<template>
	<div v-if="isAlready">
		<widget-drag v-if="drag" :model="model" :widgets="widgets" :widget="widget"/>
		<widget-show v-else :model="model" :widgets="widgets" :widget="widget"/>
	</div>
</template>
<script>


import WidgetDrag from "@/views/asset/card/module/widget/widgetDrag.vue";
import WidgetShow from "@/views/asset/card/module/widget/widgetShow.vue";

export default {
	name: "exDragWidget",
	components: {WidgetShow, WidgetDrag},
	props: {
		model: {type: Object, default: {}},
		widgets: {type: Array, default: []},
		widget: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
		}
	},
	created() {
		if (!this.widget) {
			this.widget = {};
		}
		if (!this.widget.id) {
			this.widget.id = this.$TOOL.uuid();
		}
		if (!this.widget.props) {
			this.widget.props = {};
		}
		if (!this.widget.props.type) {
			this.widget.props.type = this.widget.type;
		}

		this.isAlready = true;
	},
	methods: {}
}
</script>
<style>
.dragWidgetClass {
	cursor: move;
	float: left;
	background: #fff;
	width: 100%;
	min-height: 50px;
//line-height: 50px; text-align: center; horiz-align: center;
	border: 1px dashed #e6e6e6;
	overflow: auto;
}

.dragWidgetClass:hover {
	border-color: #ec915d;
}

.widgetHeader {
	float: left;
	width: 100%;
	display: none;
	margin-top: -18px;
}

.widgetHeaderTitle {
	float: left;
	font-size: 12px;
	color: rgba(236, 145, 93, 0.5);
}

.widgetHeaderButton {
	float: right;
	border: 1px dashed #e6e6e6;
}

.dragWidgetClass:hover .widgetHeader {
	display: block;
}

.dragWidgetClass:hover .widgetHeaderButton {
	border-color: #ec915d;
	cursor: pointer;
}

.widgetDragAreaClass {
	min-height: 150px;
	background: rgba(243, 149, 95, 0.1);
}

.innerDrawer {
	:deep .el-overlay {
		position: absolute;
	}
}

.colClass {
	height: 35px;
}
</style>
<script setup>
</script>
